.main {
  max-width: var(--global-main-width);
  margin: 0 auto;
  padding: 0 var(--mobile-padding-width);
  display: flex;
  width: 100%;

  .leftContent {
    padding-top: 68px;
    .cardLine {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: space-between;
      gap: 40px;
    }
  }
  .rightContent {
    // flex: 1;
    width: 80%;
    position: relative;
    .navLinkWrap {
      position: sticky;
      width: 196px;
      height: 203px;
      margin-left: 108px;
      margin-top: 51px;
      top: 130px;
    }
  }

  @media screen and (max-width: 1440px) {
    .leftContent {
      .cardLine {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 32px;
        height: auto !important;
      }
    }

    .rightContent {
      .navLinkWrap {
        margin-left: 40px;
      }
    }
  }
  @media screen and (max-width: 1024px) {
    .rightContent {
      display: none;
    }
  }
  @media screen and (max-width: 768px) {
    .leftContent {
      .cardLine {
        &.getInvolved {
          grid-template-columns: 1fr !important;
        }
      }
    }
  }
}
